page {
  background: #f7f7f7;
}

.main {
  padding: 20upx;
}
image {
  width: 100%;
  height: 100%;
}
.main-box {
  padding: 20upx;
  background: #fff;
  border-radius: 8upx;
  border: 1px solid #fff;
}
.pay-main {
  // padding: 20upx;
  background: #fff;
  border-radius: 8upx;
  border: 1px solid #fff;
  &.active {
    border: 1px solid #37af71;
    background: #effff6;
  }
  .public-box {
    padding: 18upx 30upx;
    border-top: 1px dashed #979797;
    background: #fff;
    .w-120 {
      width: 130rpx;

      display: inline-block;
    }
  }
}
.serve-box {
  .serve-img {
    width: 300upx;
    height: 160upx;
  }
  .serve-right {
    width: calc(100% - 330upx);
  }
  .tutor-img {
    width: 104upx;
    height: 104upx;
    border-radius: 10upx;
  }
  .tutor-right {
    width: calc(100% - 126rpx);
    .tutor-tag {
      height: 36rpx;
      background: #f2f2f2;
      border-radius: 4rpx;
      color: #666;
      line-height: 36rpx;
      display: inline-block;
      padding: 0 14upx;
      border-radius: 8upx;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  background: #fff;
  // height: 108upx;
  padding: 16upx 24upx 22upx;
  display: flex;
  align-items: center;
  .customBtn {
    width: 42upx;
    margin-left: 28upx;

    & > button {
      width: 100% !important;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }
  .bottomBtn {
    // margin-right: 24upx;
    height: 70upx;
    line-height: 70upx;
    background: linear-gradient(270deg, #34a76c 0%, #30c075 100%);
    box-shadow: 0px 6upx 24upx 0px rgba(0, 78, 52, 0.12);
    border-radius: 35upx;
    margin-left: auto;
    color: #fff;
    width: 100%;
    text-align: center;
  }
}
